<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/ljq.css" />
		<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<style>
			/*效果*/
			
			.mui-content .xiaoguo {
				display:block;
				width: 2.09rem;
				height: 2.05rem;
				margin: 0 auto;
				margin-top: 0.2rem;
			}
			
			.mui-content .xiaoguo.up {
				background: url(img/shangshengxiaoguo.png)no-repeat top center;
				background-size: 1.87rem;
			}
			
			.mui-content .xiaoguo.down {
				background: url(img/xiajiangxiaoguo.png)no-repeat top center;
				background-size: 1.87rem;
			}
			
			.xiaoguo .span1 {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 0.31rem;
				color: #FF6A4C;
				padding-top: 0.75rem;
				line-height: 0.3rem;
				/*height: 0.95rem;*/
			}
			
			.xiaoguo .today {
				margin-top: 0.05rem;
				text-align: center;
				position: relative;
			}
			
			.xiaoguo .em1 {
				/*float: left;*/
				font-size: 0.12rem;
				color: #999;
				/*margin-left: 0.5rem;*/
			}
			
			.xiaoguo img {
				/*float: left;*/
				width: 0.13rem;
				height: 0.13rem;
				position: absolute;
				top: 0.03rem;
				margin-left: 0.05rem;
			}
			
			.xiaoguo .span2 {
				display: block;
				width: 100%;
				text-align: center;
				margin-top: 0.1rem;
				color: #808080;
				font-size: 0.19rem;
			}
			
			.xiaoguo .em2 {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 0.12rem;
				color: #808080;
				margin-top: 0.05rem;
			}
			/*背景*/
			
			.beijing {
				position: relative;
				width: 100%;
				height: 1.5rem;
			}
			.beijing::before{
				position: absolute;
				display: block;
				width: 100%;
				height: 1rem;
				left: 0;
				top:0;
				background: url(img/index_beijing.png)no-repeat center top;
				background-size: 100%;
				content: '';
				z-index:0;
			}
			
			.beijing .div1 {
				position: relative;
				display: none;
				width: 100%;
				padding-top: 0.54rem;
				color: #fff;
				z-index: 1;
			}
			
			.beijing .div1 .chengben {
				
				float: left;
				width: 30%;
				text-align: center;
				margin-left: 3%;
				
			}
			
			.beijing .div1 .zhichu {
				float: right;
				width: 30%;
				text-align: right;
				text-align: center;
				margin-right: 3%;
				color: #FFFFFF;
			}
			
			.beijing .div1 span {
				display: block;
				font-size: 0.19rem;
				margin-bottom: 0.05rem;
			}
			
			.beijing .div1 em {
				display: block;
				font-size: 0.12rem;
			}
			
			.beijing .div2 {
				position: relative;
				width: 100%;
				padding-top: 0.54rem;
				margin-top: 0.18rem;
				z-index: 1;
				/*gai*/
			}
			
			.beijing .div2 a {
				float: left;
				width: 30%;
				margin-left: 2%;
				padding-bottom: 0.03rem;
				/*gai*/
				text-align: center;
				background: #fff;
				border-radius: 5px;
				box-shadow: 1px 1px 1px rgba(65, 152, 255, 0.2);
				/*gai*/
			}
			
			.beijing .div2 a:nth-child(1) {
				margin-left: 3%;
			}
			
			.beijing .div2 em {
				float: left;
				width: 100%;
				font-size: 0.1rem;
				color: #808080;
				margin-top: 0.06rem;
			}
			.beijing .div2 p{
				
				margin-bottom: 0.1rem;
			}
			
			.beijing .div2 .span1 {
				font-size: 0.16rem;
			}
			
			.beijing .div2 .span2 {
				font-size: 0.11rem;
				width: 0.2rem;
				margin: 0 auto;
				margin-top: 0.02rem;
				text-align: center;
			}
			
			.beijing .div2 img {
				width: 0.1rem;
				margin-top: 0.01rem;
			}
			
			.up {
				color: #FF6A4C!important;
			}
			
			.down {
				color: #21CD19!important;
			}
		</style>

		<style>
			.hr {
				display: block;
				width: 96%;
				margin-left: 4%;
				background: #ccc!important;
				margin-bottom: 0.2rem;
				height: 1px;
				margin-top: 0.03rem;
			}
			
			.xialakuang {
				background: url(img/xialakuang1.png)no-repeat top center;
				width: 80%;
				position: fixed;
				left: 10%;
				top: 0.28rem;
				z-index: 111;
				padding-top: 0.1rem;
				border-radius: 15px;
			}
			
			.xialakuang .xiala_span {
				display: block;
				width: 100%;
				height: 0.44rem;
				line-height: 0.44rem;
				text-indent: 0.2rem;
				font-size: 0.15rem;
				color: #4D4D4D;
				background: #fff;
				border-bottom: 1px solid #ccc;
			}
			
			.xiala_span1:first-child {
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}
			
			.xialakuang .add_span {
				display: block;
				width: 100%;
				height: 0.44rem;
				line-height: 0.44rem;
				font-size: 0.15rem;
				background: url(img/jianbian3.png)no-repeat center center;
				color: #fff;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			
			.xialakuang .add_span img {
				width: 0.15rem;
				margin-left: 0.2rem;
				margin-right: 0.1rem;
			}
			
			.yinying {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: #000000;
				opacity: 0.3;
				z-index: 100;
			}
			.head1{
				position: relative;
			}
			.head1 .div1{
				width: 100%;
				padding:0 0.25rem;
				text-align: center;
			}
			.head1 .img1{
				/*margin-left: 0.03rem;*/
				position: absolute;
				margin:0;
				left: 0.1rem;
				top:50%;
				transform: translateY(-50%);
				border-radius: 50%;
			}
			.head1 .img2{
				/*margin-right: 0.03rem;*/
				position: absolute;
				margin:0;
				right: 0.1rem;
				top:50%;
				transform: translateY(-50%);
			}
			.time .a1 {
			    margin-left: 0;
			}
			
			/***************侧边菜单******************/
			.mui-content{position: relative;height: auto;overflow-y: auto;overflow-x: hidden;}
			.mui-off-canvas-wrap{overflow:inherit;}
			.mui-off-canvas-wrap.mui-active+.mui-bar{visibility:hidden;transition: transform 350ms cubic-bezier(.165,.84,.44,1);}
			.mui-off-canvas-left, .mui-off-canvas-right{
				width: 2.25rem;
			}
			.mui-scroll-wrapper{background-color: #fff;}
			
			.head2 .div2 {
				margin-left: 0.27rem;
			}
			
			.menubg {
				display:block;
				width: 100%;
				text-align: center;
				padding-top: 0.5rem;
			}
			
			.menubg img {
				display: block;
				width: 0.75rem;
				height: 0.75rem;
				border-radius: 50%;
				margin: 0 auto;
			}
			
			.menubg span {
				display: block;
				font-size: 0.15rem;
				color: #fff;
				padding: 0.15rem 0;
			}
			
			.mui-content-padded {
				padding: 0;
				margin: 0;
			}
			
			.mui-content-padded a {
				display: block;
				width: 95%;
				margin-left: 5%;
				height: 0.49rem;
				border: 0;
				font-size: 0.14rem;
				border-radius: 0!important;
			}
			
			.mui-content-padded img {
				float: left;
				width: 0.2rem;
				height: 0.2rem;
				margin-top: 0.05rem;
			}
			
			.mui-content-padded span {
				float: left;
				margin-left: 0.18rem;
				font-size: 0.14rem;
				color: #4D4D4D;
				margin-top: 0.07rem;
				font-weight: normal;
			}
			
			.mui-content-padded em {
				overflow: hidden;
				width: 0.8rem;
				float: right;
				margin-right: 0.1rem;
				font-size: 0.14rem;
				color: #808080;
				margin-top: 0.07rem;
				background-size: 0.14rem;
			}
			
			.mui-icon.mui-right:before {
				font-size: 0.14rem;
				margin-top: 0.07rem;
			}
			
			/* .tupian {
				width: 100%;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 999;
			} */
			
			.lan {
				width: 100%;
				height: 2rem;
				background: url(img/beijin1.png)no-repeat center center;
			}
			.mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop{
				box-shadow:none;
			}
		</style>

	</head>

	<body>
		<div class="mui-off-canvas-wrap" style="overflow-x: hidden;">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="tupian">
							<div class="lan">
								<!-- <div class="head2">
									<div class="div2">
										<span class="span3">我的</span>
									</div>
									<a href="me_editor.html">
										<img class="img2" src="img/bianji1.png" alt="" />
									</a>
								</div> -->
								<div  class="menubg">
									<a href="me_editor.html">
										<img id='mine-logo' src="" alt="" />
									</a>
									
									<span id='mine-name'></span>
								</div>
							</div>
						</div>
						<div class="mui-content">
							<div class="mui-content-padded">
								<a href="me_store.html" class="mui-btn mui-icon   clearfix">
									<img src="img/dianpumr.png" />
									<span>我的门店</span>
									<em id='mine-shop'>五缘湾汇都阿维提</em>
								</a>
								<!-- <a href="me_photo.html" class="mui-btn mui-icon  clearfix">
									<img src="img/xiangce.png" />
									<span>用户指南</span>
								</a> -->
								 <!-- <a href="me_photo.html" class="mui-btn mui-icon  clearfix">
									<img src="img/xiangce.png" />
									<span>我的相册</span>
								</a>
								<a href="me_video.html" class="mui-btn mui-icon  clearfix">
									<img src="img/videoimg.png" />
									<span>我的录像</span>
								</a>  -->
								<a href="me_set.html" class="mui-btn mui-icon  clearfix">
									<img src="img/shezhi.png" />
									<span>设置</span>
									<!-- <em>&nbsp;</em> -->
								</a>
							</div>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap" >
				<div id="backdrop" class="mui-off-canvas-backdrop"></div>
				<header class="mui-bar mui-bar-nav head1">
					<!--/********************日期控件**************************/-->
					<img id="mebtn"  class="img1" src="" alt="" />
					<div class="div1"><span class="span1" id="list-shop-lists"></span></div>
					<!--onclick="user_select_shop();"-->
					<!-- <a href="index_shujuluru.html"><img class="img2" src="img/bianji.png" alt="" /></a> -->
					<a class="" href="index_xiaoxi.html">
						<img class="img2" src="img/xiaoxi.png" alt="" />
					</a>
					<!--/********************日期控件**************************/-->
				</header>
					<!--/********************shoplist控件**************************/-->
				<div class="yinying" style="display: none;"></div>
				<div class="xialakuang" id="shoplist_new" style="display: none;">
					<span class="xiala_span xiala_span1" data-shopid="0">demo1</span>
					<span class="add_span xiala_span1" data-shopid="999999"><img src="img/add.png" alt=""/>添加门店</span>
				</div>
				
					<!--/********************shoplist控件**************************/-->
				<div class="mui-content">
					<div class="time clearfix">
						<div style="float: left;width: 0.15rem;margin-left: 0.12rem;height: 0.15rem;"></div>
						<em onclick="databian('jie');" id="index-date-left" class=" mui-icon mui-icon-back a1 a2"></em>
						<span onclick="btn_date_show();" id='index-date-show'></span>
						<em id="index-date-right" onclick="databian('jia');" class=" mui-icon mui-icon-forward a2"></em>
						<img class="time_img" src="img/problem.png" alt="" onclick="time_img(index1);" />
						<!--<div class="shijianbiaoqiao" style="display: none;">
							<span>
								//页面中的升降均为同比的增长率，如时间选择今天，则与昨天的相应指标对比，如选择本周，则与上周对比，如选择近7天，则与近7-14天对比，以此类推。
							</span>
						</div>-->
					</div>
					<a href="index_yingyee.html" class="xiaoguo up" id="index-xiaoguo-pic">
						<!--<img src="img/shangshengxiaoguo.png" alt="" />-->
						<span id='index-turnover_rate-name' class="span1"></span>
						<div class="today clearfix">
							<em class="em1">营业额(元)</em>
							<img id="index-turnover_rate-pic" src="" alt="" class="img1" />
							<!--<img src="img/down.png" alt="" class="img1" />-->
						</div>
						<span id='index-cumulative_month-name' class="span2"></span>
						<em class="em2">本月营业额(元)</em>
					</a>
					<div class="beijing">
						<!--<img src="img/index_beijing.png" class="img1" alt="" />-->
						<!--<div class="div1 clearfix">
							<div class="chengben"><span id='operating_cost'></span><em>成本（元）</em></div>
							<a href="index_zhichumingxi.html" class="zhichu"><span id='index-expenditure-name'></span><em>今日支出（元）</em></a>
						</div>-->
						<div class="div2 clearfix">
							
							<a id="quick-keliuliang" href='index_keliuliang.html' class="liuliang clearfix">
								<em>客流量</em>
								<div id='index-passenger-name' class="span1 down"></div>
								<span id='index-passenger-compare_rate' class="span2 down"></span>
								<img id='index-passenger-pic' src="img/down.png" alt="" />
							</a>
							<a id="quick-chengjiaolv" href='index_chengjiaolv.html' class="chengjiao clearfix">
								<em>成交率</em>
								<div id='index-volume_rate-name' class="span1 up "></div>
								<span id='index-volume_rate-compare_rate' class="span2 up"></span>
								<img id='index-volume_rate-pic' src="img/up.png" alt="" />
							</a>
							<a id="quick-huitouke" href='javascript:void(0)' class="yingye clearfix">
								<em>会员</em>
								<div id='index-turnover-name' class="span1 up"></div>
								<span id='index-turnover-compare_rate' class="span2 up"></span>
								<img id='index-turnover-pic' src="img/up.png" alt="" />
							</a>
						</div>
					</div>
		
					<div class="zongtu" style="background: #fff;width: 100%;">
						<!--<div class="tu_graphic clearfix" style="margin-top: 0.1rem;padding-bottom: 0.15rem;border-bottom: 1px solid #4198FF;">
							<div class="title0" id='index-graphic-data1-name'></div>
							<div id="main1" class="main_graphic"></div>
						</div>-->
						<div id="mychart" class="chart" style="width: 100%; height: 2.5rem; border: 0px solid #333;"></div>
		
						<!--<div class="tu_graphic clearfix" style="margin-top: 0.3rem;padding-bottom: 0.15rem;border-bottom: 5px solid #eee;">
							<div class="title0" id='index-graphic-data2-name'></div>
							<div id="main2" class="main_graphic"></div>
						</div>-->
						<div class="hr"></div>
						<div id="mychart2" class="chart" style="width: 100%; height: 2.5rem; border: 0px solid #333;"></div>
						<br />
						<br />
						<br />
		
					</div>
				</div>
			</div>
			</div>
					<!--<div id="sss" style="width: 4.68rem;height: 4.68rem;position: absolute;background-color: red;"></div>
				</div>-->
		
			<nav class="mui-bar mui-bar-tab">
				<a href="index.html" class="mui-tab-item mui-active">
					<span class="mui-icon">
					<img src="img/shouyemr.png" alt='' />
				</span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a href="store.html" class="mui-tab-item">
					<span class="mui-icon">
					<img src="img/dianpu.png" alt='' />
				</span>
					<span class="mui-tab-label">店铺</span>
				</a>
				<a href="client_searchresult.html" class="mui-tab-item">
					<span class="mui-icon">
					<img src="img/kehu.png" alt='' />
				</span>
					<span class="mui-tab-label">客户</span>
				</a>
				<!-- <a href="store_jiankongchakan.html" class="mui-tab-item">
					<span class="mui-icon">
						<img src="img/safeimg.png" alt='' />
					</span>
					<span class="mui-tab-label">安防</span>
				</a> -->
			</nav>
			<!--/********************日期控件**************************/-->
			<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
			<!--/********************日期控件**************************/-->
			<input id="index-shop-lists-id" type="hidden">
			<input id="index-shop-lists" type="hidden">
			<input id='index-end-date' type="hidden" />
			<input id='index-start-date' type="hidden" />

			<!--/***************************************************/-->
			<script src="js/mui.min.js"></script>
			<script src="js/mui.enterfocus.js"></script>
			<script src="js/app.js"></script>
			<!--<script type="text/javascript" src="js/jsencrypt.min.js"></script>
		<script src="js/md5.js"></script>-->
			<script src="js/crypto-js.js"></script>
			<script src="js/jquery.js"></script>
			<script type="text/javascript" src="js/common.js?ver=20180225"></script>
			<script type="text/javascript" src="js/fuction.js?ver=20180225"></script>
			<script src="js/echarts.js"></script>
			<script src="js/hgs-date.js?ver=20180225"></script>
			<script src="js/mui.picker.min.js"></script>
			<!-- <script src="js/chart-zx-and-zz.js?ver=20180125"></script> -->
			<script src="js/chart-zx-and-zx-axLine-y-100.js?ver=20180125"></script>
			<!--//折线与柱状图	-->
			<script src="js/ljq_biaoqiao.js?ver=20180125"></script>
			<!--//标签内容	-->
			<script type="text/javascript">
				mui.init();
			</script>
			<script>
				var shop_picker = new mui.PopPicker(); //--------------------------------------------------->>>>>>>有门店选择的页面可以要

				mui.ready(function() {
					//获取当前的客户数据
					xminereadyload();
					//获取当天的日期	
					var xtoday = GetDateStr(0);
					if (user_info.look_start_date && user_info.look_end_date) {
						if (user_info.look_start_date != user_info.look_end_date) {
							mui("#index-date-show")[0].innerHTML = user_info.look_start_date + '至' + user_info.look_end_date;
						} else {
							mui("#index-date-show")[0].innerHTML = user_info.look_start_date;
						}
						mui("#index-start-date")[0].value = user_info.look_start_date;
						mui("#index-end-date")[0].value = user_info.look_end_date;
					} else {
						mui("#index-date-show")[0].innerHTML = xtoday;
						mui("#index-start-date")[0].value = xtoday;
						mui("#index-end-date")[0].value = xtoday;
						user_info.look_start_date = xtoday;
						user_info.look_end_date = xtoday;
					}

					//获取门店列表
					//shop_lists();
					//获取当前的客户数据
					mine_info(); //--------------------------------------------------->>>>>>>其他页面可以不要
					//如果用户第一次进来，未选择门店
					new_firstcomeshop("#list-shop-lists"); //--------------------------------------------------->>>>>>>有门店选择的页面可以要
					//增加门店列表
					new_shoplistadd(shop_picker); //--------------------------------------------------->>>>>>>有门店选择的页面可以要

					//获取首页信息-数据
					main_data_list(); //--------------------------------------------------->>>>>>>其他页面换方法
					
					//获取当前的客户数据

					mui("#mine-logo")[0].src = user_info.avatar;
					mui("#mine-name")[0].innerHTML = user_info.real_name;
					mui("#mine-shop")[0].innerHTML = user_info.look_shop_name;
					mui("#mebtn")[0].src = user_info.avatar;

					mui("#mebtn")[0].addEventListener('tap',showSidleMenu);

					mui("#quick-huitouke")[0].addEventListener('tap', function(){
						setTimeout(() => {
							winlocation('client_searchresult.html?xbxtype=会员');
						}, 10);
					});
					
					

				});

				//对客户列表页面的跳转
				function winlocation(url) {
					sdate = $("#index-start-date").val();
					edate = $("#index-end-date").val();
					window.location.href = url + "&sdate=" + sdate + "&edate=" + edate;
				}
				//变化日期的加减
				function databian(jiajie) {
					new_databian(jiajie, "#index-date-show"); //--------------------------------------------------->>>>>>>有日期选择的页面可以要
					//获取首页信息-数据
					main_data_list(); //--------------------------------------------------->>>>>>>其他页面换方法
				}

				//选择门店列表
				function user_select_shop() {
					shop_picker.show(function(SelectedItem) {
						//判断用户是绑定门店
						if(SelectedItem[0].value == 999999) {
							window.location.href = "me_user_bind.html";
							return;
						}

						//登录成功，将用户信息进行本地储存
						shop_value_select(SelectedItem[0].text, SelectedItem[0].value);

						//变更显示的门店标签
						mui("#list-shop-lists")[0].innerHTML = user_info.look_shop_name;
						mui("#index-shop-lists-id")[0].value = user_info.look_shop_id;

						//获取首页信息-数据
						main_data_list(); //--------------------------------------------------->>>>>>>其他页面换方法
					});

				}
				
				//选择门店列表
				function new_select_shop() {




		

				}				

				//获取首页信息-数据
				function main_data_list() {
					var xbx = {}; //登录后的参数对象AES加密
					xbx.shop_id = user_info.look_shop_id; //是 店铺ID---2
					xbx.start_date = user_info.look_start_date; //开始搜索日期
					xbx.end_date = user_info.look_end_date; //结束搜索日期

					official_login_after(url_host + 'main', xbx, 'main');
				}

				//获取客户信息
				function mine_info() {
					//获取当前的客户数据
					var xbx = {};
					//登录后的参数对象AES加密
					official_login_after(url_host + 'mine/info', xbx, 'mine_info');
				};

				/********************日期控件**************************/
				//打开日历界面
				function btn_date_show() {
					$("#date_mbanner").show();
				}

				//确定选择日期
				function btn_date_submit() {
					judge_date_input();

					//获取首页信息-首页的数据
					main_data_list(); //--------------------------------------------------->>>>>>>其他页面换方法
				}
				/********************日期控件**************************/


				$(document).ready(function() {
					$(".head1 .span1").click(function() {
						$(".yinying").css('display','block');
						$(".xialakuang").css('display','block');
					});
					$(".yinying").click(function() {
						$(".yinying").css('display','none');
						$(".xialakuang").css('display','none');
					});
					

				})
				
				/**
				 * 切换侧边菜单
				 * */
				function showSidleMenu(){
					mui('.mui-off-canvas-wrap').offCanvas().show();
				}
				function closeSidleMenu() {
					mui('.mui-off-canvas-wrap').offCanvas().close();
				}
				//获取客户信息
				function mine_info() {
					//获取当前的客户数据
					var xbx = {};
					//登录后的参数对象AES加密
					official_login_after(url_host + 'mine/info', xbx, 'mine_info');
				};		
			</script>
	</body>

</html>